<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<title>公司信息</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="">
	<link href="css/daterangepicker.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--[if lt IE 9]>
	<script src="js/html5shiv.min.js"></script>
	<script src="js/respond.min.js"></script>
<![endif]-->
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="favicon.ico">
<style>
	[v-cloak] {
		display: none;
	}
	.el-upload.el-upload--picture-card,
	.el-upload-list--picture-card .el-upload-list__item {
		border: none;
		width: 104px!important;
		height: 104px!important;
	}
</style>
</head>
<body>
<div id="app" v-cloak>	
	<header>
	</header>
	<div class="header-space"></div>
	<section class="section441">
		<div class="content">
			<a href="47.html" class="item">个人信息</a><a href="48.html" class="item on">公司信息</a>
		</div>
	</section>
	<section class="section481">
		<div class="content">
			<div class="company">
				<div class="face-box">
					<div class="face"><img :src="logo" alt=""></div>
				</div>
				<h3>{{companyName}}</h3>
				<p><a href="52.html" class="btn-edit">修改企业认证</a></p>
			</div>
			<ul class="form">
				<li class="li"><b>公司地址：</b>{{companyAddress}}</li>
				<li class="w33 li"><b>公司性质：</b>{{companyAttr}}</li>
				<li class="w33 li"><b>公司规模：</b>{{companyPeopleNum}}</li>
				<li class="w33 li tRight"><b>所在行业：</b>{{companyIndustry}}</li>
				<li class="li">
					<p><b>公司介绍：</b></p>
					<div class="textarea-box">
						<textarea name="" placeholder="请详细描述您的公司情况，以便求职人员更好的了解公司" id="" cols="30" rows="10" v-model="companyDesc"></textarea>
						<i class="number">0/3000</i>
					</div>
				</li>
				<li>
					<p>
						<b>企业相册：</b>
					</p>
					<div class="upload-box">
						<!-- <div class="upload-item"><img src="images/img11.png" alt=""></div>
						<div class="upload-item"><img src="images/img11.png" alt=""></div>
						<div class="upload-item"><img src="images/img11.png" alt=""></div>
						<div class="upload-item"><img src="images/img11.png" alt=""></div>
						<div class="upload-item"><img src="images/img11.png" alt=""></div>
						<div class="upload-item"><img src="images/img11.png" alt=""></div>
						<div class="upload-item btn-upload">
							<span>(5/6)</span>
							<input type="file" name="" id="">
						</div> -->
						<el-upload
							:before-upload="checkImg"
							:http-request="uploadImg"
							accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
							:auto-upload="false"
							multiple
							:limit="6"
							list-type="picture-card"
							class="avatar-uploader"
							ref="EnterpriseImg"
							:file-list="imageList"
							action=""
							:on-change="checkImg"
							:on-exceed="handleOnExceed"
						>
							<div slot="default" class="upload">
								<span style="line-height: 1;">({{upLoadNum}}/6)</span>
							</div>
						</el-upload>
					</div>
				</li>
			</ul>
			<div class="operate">
				<a href="javascript:void(0)" class="btn" @click="updateCompanyInfo">保存</a>
			</div>
		</div>
	</section>
	<footer id="footer"></footer>
</div>	
<script src="js/jquery.min.js"></script>
<script src="js/slide.min.js"></script>
<script src="js/polyfill.min.js"></script>
<script src="js/jquery.nicescroll3.7.6.min.js"></script>
<script src="js/main.js"></script>
<script src="js/vue.js"></script>
<script src="js/request.js"></script>
<script src="https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
	$(function(){
		$("header").load("./enterpriseCommon/header.html");
		$("#footer").load("./enterpriseCommon/footer.html");
	})
	// var rules = {
	// 	companyDesc: {
	// 		test: function(val) {
	// 			return val !== ''
	// 		},
	// 		msg: '公司介绍必填'
	// 	},
	// 	image: {
	// 		test: function(src) {
	// 			return src !== ''
	// 		},
	// 		msg: '公司相册必须上传'
	// 	},
	// };
	var vm = new Vue({
		el: '#app',
		data () {
			return {
				logo: '',
				companyName: '',
				companyAddress: '',
				companyAttr: '',
				companyPeopleNum: '',
				companyIndustry: '',
				companyDesc: '',
				_EnterpriseImgArr: [],
				upLoadNum: 0,
				imageList: []
			}
		},
		mounted () {
			this.fetchCompanyInfo();
		},
		methods: {
			fetchCompanyInfo() {
				var vm = this;
				var url = 'enterprise/company/enterprise_base_info';
				request( url, 'GET', '',
					function (res) {
						console.log(res);
						vm.companyDesc = res.data.desc;
						vm.companyName = res.data.name;
						vm.companyAddress = res.data.address;
						vm.logo = res.data.logo;
						vm.companyAttr = res.data.type ? res.data.type.name : '未填写';
						vm.companyPeopleNum = res.data.size ? res.data.size.name : '未填写';
						vm.companyIndustry = res.data.trade ? res.data.trade.name : '未填写';
						vm.imageList = res.data.company_image;
						vm.upLoadNum = res.data.company_image.length;
					},
					function (err) {
						var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
            vm.$message({
              type: 'warning',
              message: msg
            })
					}
				)
			},
			handleOnExceed() {
				this.$message.warning('最多只能上传六张图片');
			},
			checkImg: function (file, fileList) {
				if (file.size > 10 * 1024 * 1024) {
					this.$message('上传图片大小应小于10MB');
					if (fileList) {
						this.$refs.EnterpriseImg.clearFiles()
					}
					return false
				}
				this.upLoadNum = fileList.length;
				return true
			},
			updateCompanyInfo: function() {
				var loading = this.$loading({
					lock: true,
					text: '提交中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
				var that = this;
				// var isPass = Object.keys(rules).every(function(key) {
				// 	var val = this[key];
				// 	var rule = rules[key];
				// 	var result = rule.test(val);
				// 	if (!result) {
				// 		loading.close();
				// 		this.$message({
				// 			type: 'warning',
				// 			message: rule.msg
				// 		})
				// 	}
				// 	return result
				// }, this);
				// if (!isPass) return
				var uploadList = this.$refs.EnterpriseImg.uploadFiles;
				console.log(uploadList);
				var len = uploadList.length;
				var EnterpriseImg = new Array(len);
				if (len) {
					var count = 0;
					function cFn(err) {
						count++;
						if (count >= len) {
							this._EnterpriseImgArr = EnterpriseImg;
							this.sendData(loading);
						}
					}
					var completeFn = cFn.bind(this)
					uploadList.forEach(function(uploadItem, index) {
						if (uploadItem.raw) {
							uploadImg({
								file: uploadItem.raw,
								success: function sFn(res) {
									EnterpriseImg[index] = {
										url: qiniuUrl + '/' + res.key
									}
								},
								complete: completeFn
							})
						} else {
							EnterpriseImg[index] = {
								url: uploadItem.url
							}
							completeFn();
						}
					})
					return
				}
				this._EnterpriseImgArr = EnterpriseImg;
				this.sendData(loading);
			},
			sendData(loading) {
				var vm = this;
				var param = {
					desc: this.companyDesc,
					image: {
						EnterpriseImg: this._EnterpriseImgArr
					}
				}
				console.log(param);
				request('enterprise/company/enterprise_update', 'PUT', JSON.stringify(param), function(res) {
					// console.log('sendSuccess', res);
					loading.close();
					vm.$message({
						message: res.message,
						type: 'success'
					});
					vm.fetchCompanyInfo();
				}, function(err) {
					var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
					vm.$message({
						type: 'warning',
						message: msg
					})
					loading.close()
				})
			},
			uploadImg: function(e) {
				uploadImg({
					file: e.file,
					success: successFn.bind(this),
					fail: failFn.bind(this)
				})

				function successFn(res) {
					console.log('uploadSuccess', res);
				}

				function failFn(err) {

				}
			}
		}
	})
</script>
</body>
</html>